{% extends "base.html" %}

{% block title %}效能数据展示 - 精准效能管理平台{% endblock %}

{% block content %}
<div class="dashboard-container">
    <h2>效能数据展示</h2>
    
    <div class="dashboard-tabs">
        <button class="tab-btn active" onclick="showTab('member-worktime')">成员工时数据</button>
        <button class="tab-btn" onclick="showTab('worktime')">项目工时统计</button>
    </div>
    
    <div id="member-worktime-tab" class="tab-content active">
        <div class="data-controls">
            <div class="filter-section">
                <div class="filter-row">
                    <div class="filter-item">
                        <label for="member-period-filter">统计周期：</label>
                        <input type="month" id="member-period-filter" class="filter-input">
                    </div>
                    <div class="filter-item">
                        <label for="member-name-filter">成员姓名：</label>
                        <input type="text" id="member-name-filter" class="filter-input" placeholder="输入成员姓名" list="member-name-list">
                        <datalist id="member-name-list"></datalist>
                    </div>
                </div>
                <div class="filter-buttons">
                    <button onclick="applyMemberWorktimeFilters()" class="btn btn-primary">筛选</button>
                    <button onclick="clearMemberWorktimeFilters()" class="btn btn-secondary">清空</button>
                    <button onclick="loadMemberWorktimeData()" class="btn btn-secondary">刷新数据</button>
                </div>
            </div>
        </div>
        <div class="filter-status" id="member-worktime-filter-status" style="display: none;">
            <div class="status-info">
                <span id="member-worktime-filter-count">0</span> 条记录
                <span id="member-worktime-filter-summary"></span>
            </div>
        </div>
        <div class="data-table-container">
            <table id="member-worktime-table" class="data-table">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>统计周期</th>
                        <th>角色</th>
                        <th>饱和度</th>
                        <th>已用工时</th>
                        <th>需求工时</th>
                        <th>工单工时</th>
                        <th>Bug工时</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="member-worktime-tbody">
                </tbody>
            </table>
        </div>
    </div>

    <div id="worktime-tab" class="tab-content">
        <div class="data-controls">
            <div class="filter-section">
                <div class="filter-row">
                    <div class="filter-item">
                        <label for="period-filter">统计周期：</label>
                        <input type="month" id="period-filter" class="filter-input">
                    </div>
                    <div class="filter-item">
                        <label for="project-filter">所属项目：</label>
                        <input type="text" id="project-filter" class="filter-input" placeholder="输入项目名称" list="project-list">
                        <datalist id="project-list"></datalist>
                    </div>
                    <div class="filter-item">
                        <label for="system-filter">系统名称：</label>
                        <input type="text" id="system-filter" class="filter-input" placeholder="输入系统名称" list="system-list">
                        <datalist id="system-list"></datalist>
                    </div>
                </div>
                <div class="filter-buttons">
                    <button onclick="applyFilters()" class="btn btn-primary">筛选</button>
                    <button onclick="clearFilters()" class="btn btn-secondary">清空</button>
                    <button onclick="loadWorktimeStats()" class="btn btn-secondary">刷新数据</button>
                </div>
            </div>
        </div>
        <div class="filter-status" id="filter-status" style="display: none;">
            <div class="status-info">
                <span id="filter-count">0</span> 条记录
                <span id="filter-summary"></span>
            </div>
        </div>
        <div class="data-table-container">
            <table id="worktime-table" class="data-table">
                <thead>
                    <tr>
                        <th>统计周期</th>
                        <th>所属项目</th>
                        <th>系统名称</th>
                        <th>总需求数量</th>
                        <th>总工时</th>
                        <th>已完成需求</th>
                        <th>已完成需求工时</th>
                        <th>在途需求</th>
                        <th>在途需求工时</th>
                        <th>非事务型需求</th>
                        <th>事务型需求</th>
                        <th>明细</th>
                    </tr>
                </thead>
                <tbody id="worktime-tbody">
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 项目工时明细弹窗 -->
    <div id="detail-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>工时明细</h3>
                <span class="close" onclick="closeDetailModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div id="detail-info"></div>
                <table id="detail-table" class="data-table">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>需求类型</th>
                            <th>状态</th>
                            <th>工时</th>
                        </tr>
                    </thead>
                    <tbody id="detail-tbody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
{% endblock %}